<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
			}

			ul.slides {
				position: relative;
				width: 600px;
				height: 280px;
				margin: 0;
				padding: 0;
				background-color: #0040D0;
				overflow: hidden;
				list-style: none;
				border-radius: 10px;
			}

			li.slide {
				margin: 0;
				padding: 0;
				width: inherit;
				height: inherit;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				justify-content: center;
				color: #EEEEEE;
				font-size: 120px;
				align-items: center;
				transition: 0.5s transform ease-in-out;
				/* border-radius: 10px; */
			}

			.slide:nth-of-type(1) {
				background-color: #da8067;
			}

			.slide:nth-of-type(2) {
				background-color: #ff5d6c;
				left: 100%;
			}

			.slide:nth-of-type(3) {
				background-color: #009E86;
				left: 200%;
			}

			input[type="radio"] {
				position: relative;
				z-index: 100;
				display: none;
			}

			.controls-visable {
				position: absolute;
				width: 100%;
				bottom: 12px;
				text-align: center;
			}

			.controls-visable label {
				display: inline-block;
				width: 10px;
				height: 10px;
				background-color: #FFF;
				border-radius: 50%;
				margin: 0 3px;
				border: 2px solid #fff;
			}

			.slides input[type="radio"]:nth-of-type(1):checked~.controls-visable label:nth-of-type(1) {
				background-color: #333;
			}

			.slides input[type="radio"]:nth-of-type(2):checked~.controls-visable label:nth-of-type(2) {
				background-color: #333;
			}

			.slides input[type="radio"]:nth-of-type(3):checked~.controls-visable label:nth-of-type(3) {
				background-color: #333;
			}

			/* 复制3个 */

			.slides input[type="radio"]:nth-of-type(1):checked~.slide {
				transform: translateX(0%);
			}

			.slides input[type="radio"]:nth-of-type(2):checked~.slide {
				transform: translateX(-100%);
			}

			.slides input[type="radio"]:nth-of-type(3):checked~.slide {
				transform: translateX(-200%);
			}

			.navigator i {
				font-size: 32px;
				color: #333;
			}

			.slide input[type="radio"]:nth-of-type(1):checked~.navigator:nth-of-type(1) {
				display: flex;
			}

			.slide input[type="radio"]:nth-of-type(1):checked~.navigator:nth-of-type(2) {
				display: flex;
			}

			.slide input[type="radio"]:nth-of-type(1):checked~.navigator:nth-of-type(3) {
				display: flex;
			}
		</style>
	</head>
	<body>
		<ul class="slides">
			<input type="radio" name="control" id="control-1" value="" checked />
			<input type="radio" name="control" id="control-2" value="" />
			<input type="radio" name="control" id="control-3" value="" />
			<li class="slide">1</li>
			<li class="slide">2</li>
			<li class="slide">3</li>

			<div class="controls-visable">
				<label for="control-1"></label>
				<label for="control-2"></label>
				<label for="control-3"></label>
			</div>
		</ul>
	</body>
</html>
